<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <el-form :model="form" ref="form" label-width="300px" v-loading="formLoading" :rules="rules" inline="true">
          <el-form-item label="手机号：" prop="user.userName" required>
            <el-input v-model="form.user.userName"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名：" prop="user.realName" required>
            <el-input v-model="form.user.realName"></el-input>
          </el-form-item>
          <el-form-item label="人员类别：" prop="user.departmentId" required>
            <el-tree-select v-model="form.user.departmentId" :data="departmentTree" check-strictly
              :render-after-expand="true" default-expand-all placeholder="人员类别" />
          </el-form-item>
          <el-form-item label="头像：" prop="imagePath">
            <el-upload class="upload" action="/api/upload/folder/file" accept=".jpg,.png" :data="{ folder: 'profile' }"
              :show-file-list="false" :on-progress="uploadProgress" :on-success="uploadSuccess" :on-error="uploadError">
              <el-avatar :size="100" :src="form.user.imagePath" shape="circle" fit="scale-down" class="user-image">暂无头像
              </el-avatar>
            </el-upload>
          </el-form-item>
          <el-form-item label="职位：" prop="user.jobTitle" required>
            <el-input v-model="form.user.jobTitle"></el-input>
          </el-form-item>
          <el-form-item label="身份证号：" prop="user.idCard" required>
            <el-input v-model="form.user.idCard"></el-input>
          </el-form-item>
          <el-form-item label="年龄：" prop="user.age" required>
            <el-input v-model.number="form.user.age"></el-input>
          </el-form-item>
          <el-form-item label="性别：" prop="user.sex" required>
            <el-select v-model="form.user.sex" placeholder="性别" clearable>
              <el-option v-for="item in EnumMap.user.sexEnum" :key="item.key" :value="item.key"
                :label="item.value"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="手机：" prop="phone">
        <el-input v-model="form.user.phone"></el-input>
      </el-form-item> -->
          <el-form-item label="健康状况：" prop="userExtend.health" required>
            <el-input v-model="form.userExtend.health"></el-input>
          </el-form-item>
          <el-form-item label="参加工作时间：" prop="userExtend.workTime" required>
            <el-date-picker v-model="form.userExtend.workTime" type="date" placeholder="选择日期"
              value-format="YYYY-MM-DD" />
          </el-form-item>
          <el-form-item label="在职教育毕业院校及专业：" prop="userExtend.jobEducationMajor" required>
            <el-input v-model="form.userExtend.jobEducationMajor"></el-input>
          </el-form-item>
          <el-form-item label="工作单位及职务/工种：" prop="userExtend.workUnitType" required>
            <el-input v-model="form.userExtend.workUnitType"></el-input>
          </el-form-item>
          <el-form-item label="通信地址及邮编：" prop="userExtend.mailAddressCode" required>
            <el-input v-model="form.userExtend.mailAddressCode"></el-input>
          </el-form-item>
          <el-form-item label="状态：" prop="user.status" required>
            <el-select v-model="form.user.status" placeholder="状态">
              <el-option v-for="item in EnumMap.user.statusEnum" :key="item.key" :value="item.key"
                :label="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="资料上传：" prop="fileList">
            <UserTabDataUpload DictType="user_file_type" v-model:fileList="form.fileList" :userInfo="form.user">
            </UserTabDataUpload>
          </el-form-item>
          <!-- <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item> -->
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="培训记录" name="second">
        <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
          <el-table-column prop="userRealName" label="姓名" />
          <el-table-column prop="trainClassname" label="培训班（内容）名称" width="300" />
          <el-table-column prop="trainUnit" label="培训单位" />
          <el-table-column prop="classHour" label="学时" />
          <el-table-column prop="trainBeginTime" label="培训开始时间" />
          <el-table-column prop="trainEndTime" label="培训结束时间" />
          <el-table-column prop="checkResult" label="考核结果" />
          <el-table-column prop="note" label="备注" />
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
          style="margin-top: 15px" :current-page="queryParam.pageIndex" :page-sizes="[10, 20, 30, 100]"
          :page-size="queryParam.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="违章记录" name="third">
        <el-table :data="tableBad" border fit highlight-current-row style="width: 100%">
          <el-table-column prop="userRealName" label="姓名" />
          <el-table-column prop="violationTime" label="违规时间" />
          <el-table-column prop="violation" label="违规违章行为" />
          <el-table-column prop="violationLevel" label="违规违章级别" />
          <el-table-column prop="violationResult" label="追责处理结果" />
          <el-table-column prop="note" label="备注" />
        </el-table>
        <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" background
          style="margin-top: 15px" :current-page="queryParam1.pageIndex" :page-sizes="[10, 20, 30, 100]"
          :page-size="queryParam1.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total1">
        </el-pagination>

      </el-tab-pane>
      <el-tab-pane label="奖惩记录" name="fourth">
        <el-table :data="tableDataRp" border fit highlight-current-row style="width: 100%">
          <el-table-column prop="userRealName" label="姓名" />
          <el-table-column prop="violationTime" label="受奖惩日期" />
          <el-table-column prop="violation" label="受奖惩事由" />
          <el-table-column prop="violationResult" label="所受奖励/处罚" />
          <el-table-column prop="note" label="备注" />
        </el-table>
        <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2" background
          style="margin-top: 15px" :current-page="queryParam2.pageIndex" :page-sizes="[10, 20, 30, 100]"
          :page-size="queryParam2.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total2">
        </el-pagination>

      </el-tab-pane>
      <el-tab-pane label="学历技能提升" name="five">
        <el-table :data="tableDataIm" border fit highlight-current-row style="width: 100%">
          <el-table-column prop="userRealName" label="姓名" />
          <el-table-column prop="skillTime" label="取证时间" />
          <el-table-column prop="skillContent" label="内容" />
          <el-table-column prop="skillResult" label="考核情况" />
          <el-table-column prop="cardNum" label="证件编号" />
        </el-table>
        <el-pagination @size-change="handleSizeChange3" @current-change="handleCurrentChange3" background
          style="margin-top: 15px" :current-page="queryParam3.pageIndex" :page-sizes="[10, 20, 30, 100]"
          :page-size="queryParam3.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total3">
        </el-pagination>

      </el-tab-pane>
      <el-tab-pane label="工作经历" name="six">
        <el-table :data="tableDataexperience" border fit highlight-current-row style="width: 100%">
          <el-table-column prop="userRealName" label="姓名" />
          <el-table-column prop="workTime" label="起讫年月" />
          <el-table-column prop="workPlace" label="工作单位" />
          <el-table-column prop="workTitle" label="职务/岗位" />
          <el-table-column prop="workScore" label="取得的主要工作成绩" />
          <el-table-column prop="workCertifier" label="证明人" />
        </el-table>
        <el-pagination @size-change="handleSizeChange4" @current-change="handleCurrentChange4" background
          style="margin-top: 15px" :current-page="queryParam3.pageIndex" :page-sizes="[10, 20, 30, 100]"
          :page-size="queryParam4.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total4">
        </el-pagination>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { EnumMap } from '@/api/EnumMap';
import { employeeSelect, employeeEdit } from '@/api/user';
import { tree } from '@/api/department';
import useStore from '@/store';
import UserTabDataUpload from '@/components/UserTabDataUpload/index.vue';
const { tagsView } = useStore();
import {
  userExtendTrainPage, userExtendViolationPage, userRpPage, userexperiencePage
} from '@/api/user';


export default {
  name: 'EmployeeEdit',
  components: { UserTabDataUpload },
  data() {
    return {
      EnumMap: EnumMap,
      activeName: 'first',
      tableData: [],
      tableBad: [],
      tableDataRp: [],
      tableDataIm: [],
      tableDataexperience: [],
      total: 0,
      total1: 0,
      total2: 0,
      total3: 0,
      total4: 0,
      queryParam: {
        pageIndex: 1,
        pageSize: 10,
        userId: '',
      },
      queryParam1: {
        pageIndex: 1,
        pageSize: 10,
        type: '0',
        userId: '',
        violation: ''
      },
      queryParam2: {
        pageIndex: 1,
        pageSize: 10,
        type: '1',
        userId: '',
        violation: ''
      },
      queryParam3: {
        pageIndex: 1,
        pageSize: 10,
        userId: '',
        cardNum: ''
      },
      queryParam4: {
        pageIndex: 1,
        pageSize: 10,
        userId: '',
      },
      form: {
        user: {
          id: null,
          userName: null,
          realName: null,
          idCard: null,
          imagePath: null,
          jobTitle: null,
          systemRole: 1,
          status: 1,
          age: null,
          sex: null,
          // phone: null,
          departmentId: null
        },
        userExtend: {
          health: null,
          jobEducationMajor: null,
          mailAddressCode: null,
          trainAttendance: null,
          trainOpinion: null,
          unitOpinion: null,
          workTime: null,
          workUnitType: null
        }
      },
      departmentTree: [],
      formLoading: false,
      userNameDisable: false,
    };
  },
  created() {
    let id = this.$route.query.id;
    this.queryParam.userId = id;
    this.queryParam1.userId = id;
    this.queryParam2.userId = id;
    this.queryParam3.userId = id;
    this.queryParam4.userId = id;
    if (id && parseInt(id) !== 0) {
      this.formLoading = true;
      employeeSelect(id)
        .then(re => {
          console.log(re);
          this.form = re.response;
          this.userNameDisable = true;
        })
        .finally(() => {
          this.formLoading = false;
        });
    }

    tree().then(re => {
      this.departmentTree = re.response;
    });
    this.search();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    search() {
      userExtendTrainPage(this.queryParam).then(re => {
        // const re = re.response;
        this.tableData = re.list;
        this.total = re.total;
        this.queryParam.pageIndex = re.pageNum;
      });
      userExtendViolationPage(this.queryParam1).then(data => {
        const re = data.response;
        this.tableBad = re.list;
        this.total1 = re.total;
        this.queryParam1.pageIndex = re.pageNum;
      });
      userExtendViolationPage(this.queryParam2).then(data => {
        const re = data.response;
        this.tableDataRp = re.list;
        this.total2 = re.total;
        this.queryParam2.pageIndex = re.pageNum;
      });
      userRpPage(this.queryParam3).then(data => {
        const re = data.response;
        this.tableDataIm = re.list;
        this.total3 = re.total;
        this.queryParam3.pageIndex = re.pageNum;
      });
      userexperiencePage(this.queryParam4).then(data => {
        const re = data.response;
        this.tableDataexperience = re.list;
        this.total4 = re.total;
        this.queryParam4.pageIndex = re.pageNum;
      });
    },
    handleSizeChange(val) {
      this.queryParam.pageSize = val;
      this.search();
    },
    handleCurrentChange(val) {
      this.queryParam.pageIndex = val;
      this.search();
    },
    handleSizeChange1(val) {
      this.queryParam1.pageSize = val;
      this.search();
    },
    handleCurrentChange1(val) {
      this.queryParam1.pageIndex = val;
      this.search();
    },
    handleSizeChange2(val) {
      this.queryParam2.pageSize = val;
      this.search();
    },
    handleCurrentChange2(val) {
      this.queryParam2.pageIndex = val;
      this.search();
    },
    handleSizeChange3(val) {
      this.queryParam3.pageSize = val;
      this.search();
    },
    handleCurrentChange3(val) {
      this.queryParam3.pageIndex = val;
      this.search();
    },
    handleSizeChange4(val) {
      this.queryParam4.pageSize = val;
      this.search();
    },
    handleCurrentChange4(val) {
      this.queryParam4.pageIndex = val;
      this.search();
    },
    submitForm() {
      console.log('23123');
      this.$refs.form.validate(valid => {
        if (valid) {
          this.formLoading = true;
          employeeEdit(this.form)
            .then(re => {
              if (re.code === 1) {
                this.$message.success(re.message);
                tagsView.delCurrentView(this).then(() => {
                  this.$router.push('/user/employee/list');
                });
              } else {
                this.$message.error(re.message);
              }
            })
            .finally(() => {
              this.formLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    uploadProgress() {
      this.loading = this.$loading({
        lock: true,
        text: '文件上传中…',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      });
    },
    uploadSuccess(re, file) {
      console.log(re, '图片');
      this.loading.close();
      if (re.code === 1) {
        this.form.user.imagePath = re.response.path;
      } else {
        this.$message.error(re.message);
      }
    },
    uploadError() {
      this.loading.close();
      this.$message.error('文件上传失败，请检查文件大小或文件格式');
    },
    resetForm() {
      this.form = {
        id: null,
        userName: null,
        realName: null,
        idCard: null,
        imagePath: null,
        jobTitle: null,
        systemRole: 1,
        status: 1,
        age: null,
        sex: null,
        phone: null,
        departmentId: null
      };
      this.$refs['form'].resetFields();
    }
  }
};
</script>
